<template>
  <div class="situation-page">
    <div class="page-header">
      <el-button class="back-button" icon="el-icon-back" @click="goback">返回</el-button>
      <div class="page-title">参会情况</div>
    </div>
    <div class="page-body">
      <div class="table-search">
        <el-radio-group @change="typeChange" v-model="attendanceType" >
          <el-radio-button label="0">全部</el-radio-button>
          <el-radio-button label="1">参加</el-radio-button>
          <el-radio-button label="2">未响应</el-radio-button>
          <el-radio-button label="3">请假</el-radio-button>
        </el-radio-group>
      </div>
      <div class="table-box">
        <el-table
          :data="tableData"
          height="100%"
        >
          <el-table-column align="center" type="index" label="序号" width="50" />
          <el-table-column prop="attendeesName" align="center" label="姓名" width="120" />
          <el-table-column prop="contact" align="center" label="联系方式" width="150" />
          <el-table-column prop="partyOrgName" align="center" label="所属党组织" min-width="250" />
          <el-table-column prop="attendanceType" align="center" label="参与情况" width="120">
            <template slot-scope="scope">
              {{ statusList[scope.row.attendanceType] }}
            </template>
          </el-table-column>
          <el-table-column prop="leaveApproverName" align="center" label="审批人" width="120" />
        </el-table>
      </div>
      <pagination
        :total="total"
        :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize"
        @pagination="getData"
      />
    </div>
  </div>
</template>
<script>
import { queryAttendanceByCondition } from '@/api/cadreBusiness/meetingManagement'
export default {
  data () {
    return {
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      tableData: [],
      attendanceType: '0',
      id: '',
      statusList: ['未开始', '进行中', '已撤销', '已结束']
    }
  },
  methods: {
    init (id) {
      this.id = id
      this.queryParams.pageNo = 1
      this.getData()
    },
    getData () {
      queryAttendanceByCondition({
        id: this.id,
        attendanceType: this.attendanceType,
        ...this.queryParams
      }).then((res) => {
        this.tableData = res?.data?.records || []
        this.total = res?.data?.total || 0
      })
    },
    goback () {
      this.$emit('goback')
    },
    typeChange () {
      this.queryParams.pageNo = 1
      this.getData()
    }
  }
}
</script>
<style scoped lang="scss">
.page-header {
  display: flex;
  height: 60px;
  align-items: center;
  border-bottom: 1px solid #ddd;
  .back-button {
    margin-right: 16px;
  }
  .page-title {
    font-size: 18px;
    font-weight: 600;
  }
}
.page-body {
  padding-top: 16px;
  .table-search {
    margin-bottom: 16px;
  }
  .table-box {
    height: calc(100vh - 280px);
    .click-span {
      cursor: pointer;
      color: #409EFF;
    }
  }
}

</style>
